Component({
  data: {
    canvasTemplate: null,
  },
  properties: {
    items:{
      type: Object,
      value:null,
      observer(newVal) {
        console.log(2)
        this.genPosterData()
      }
    }
  },
  lifetimes: {
    ready() {
      console.log(1)
      this.genPosterData()
    }
  },
  methods: {
    posterImgOk(e) {
      console.log('海报',e)
      this.triggerEvent('groupPainter', e.detail.path);
      this.setData({canvasTemplate: null})
    },
    genPosterData() {
      console.log('海报groupItems',this.data.items)
      if(!this.data.items) return
      let defaultWidth = 500;
      let defaultHeight = 400;
      let bg = getApp().toFullUrl(this.data.items.coverImg);
      let priceImg = getApp().toFullUrl('wxapp/static/shop-mall/common/group_share.png')
      let price = this.data.items.price;
      let orignPrice = this.data.items.originPrice||null
      console.log(this.data.items.coverImg,bg,priceImg)
      this.setData({canvasTemplate: null})
      let canvasTemplate = {
        background: bg,
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        views: [
          // {
          //   type: "image",
          //   url: bg,
          //   css: {
          //     top: "0rpx",
          //     left: "0rpx",
          //     width: "500rpx",
          //     height: "400rpx",
          //     // mode: "aspectFill",
          //     borderRadius: "17rpx"
          //   }
          // },
          {
            type: "image",
            url: priceImg,
            css: {
              bottom: "0rpx",
              left: "0rpx",
              width: "500rpx",
              height: "100rpx",
              mode: "aspectFill",
              // borderRadius: "17rpx"
            }
          },
          {
            type: "text",
            text: "拼团价",
            css: [
              {
                borderRadius:"5rpx",
                bottom: `61rpx`,
                left:"30rpx",
                width: "76rpx",
                height: "26rpx",
                color:"#E74B4B",
                textAlign:"center",
                lineHeight:"26rpx"
              },
              {
                background:"#fff",
                fontSize:"16rpx"
              }
            ],
          },
          {
            type: "text",
            text: "拼团优惠多多",
            css: [
              {
                bottom: `31rpx`,
                right:"22rpx",
                color:"#fff"
              },
            ],
          },
          {
            type: "text",
            text: `￥${price/100}`,
            css: [
              {
                bottom: `21rpx`,
                left:"30rpx",
                color:"#fff"
              },
              {
                fontSize:"30rpx"
              }
            ],
          },
          {
            type: "text",
            text: `${orignPrice?('￥'+orignPrice/100):''}`,
            css: [
              {
                bottom: `21rpx`,
                left:"189rpx",
                color:"#FFBFBF"
              },
              {
                fontSize:"20rpx"
              }
            ],
          },
        ]
      };
      console.log('canvasTemplate',canvasTemplate)
      wx.nextTick(() => {
        this.setData({canvasTemplate: canvasTemplate});
      })
    },
  }
});
